<script >
import Stomp from 'stompjs'
import axios from "axios";
export default {
  name: 'messageNotice',
  data () {
    return {
      client: null,
      name:"未选择",

    }
  },
  created() {
    //初始化连接
    this.connect();
  },
  methods: {
    //webSocket连接成功后回调函数
    onConnected(frame) {
      console.log("Connected: " + frame);
      //订阅
      this.client.subscribe("hs.test", this.responseCallback, this.onFailed);
      console.log("连接："+frame)

    },
    onFailed(frame) {
      console.log("Failed: " + frame);
    },
    responseCallback(frame) {
      console.log("得到的消息 msg=>" + frame.body);
      console.log(frame)
      this.name = frame.body
      // this.$modal.msgSuccess("有新的顾客");
    },

    connect() {
      this.client = Stomp.client("ws://114.116.206.54:8674/ws")

      var headers = {
        "login": "admin",
        "passcode": "admin",
        "host": "/"
      };
      this.client.connect(headers, this.onConnected, this.onFailed);
    },

  }


}


</script>

<template>
  <div class="contaner">
    <h1  class="title">{{name}}</h1>
    <img src="../../static/img/true.png" class="img">
  </div>

</template>

<style >
.contaner{
  height: 1080px;
  width: 1920px;
}
.img{
  z-index: -99;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.title{
  position: absolute;
  height: 300px;
  width: auto;
  justify-content: center;
  align-items: center;
  top: 40%;
  left: 50%;
  color: white;
  font-size: 200px;
  text-align: center;
  transform: translate(-50%, -50%);
}
</style>
